<template>
  <view class="add-address-page">
    <!-- 地址选择区域 -->
    <view class="address-selection-section">
      <view class="address-item" @click="selectAddress">
        <text class="iconfont-v2 icon-dingwei address-icon"></text>
        <text class="address-text">{{ selectedAddress || '请选择地址' }}</text>
        <text class="iconfont-v2 icon-youjiantou arrow-icon"></text>
      </view>
    </view>

    <!-- 表单区域 -->
    <view class="form-section">
      <!-- 大楼名 -->
      <view class="form-item">
        <text class="iconfont-v2 icon-dalou2-xianxing form-icon"></text>
        <input 
          class="form-input" 
          type="text" 
          placeholder="大楼名,如知新楼"
          v-model="formData.buildingName"
        />
      </view>

      <!-- 门牌号 -->
      <view class="form-item">
        <text class="form-icon">🚪</text>
        <input 
          class="form-input" 
          type="text" 
          placeholder="门牌号,如101"
          v-model="formData.doorNumber"
        />
      </view>

      <!-- 姓名 -->
      <view class="form-item">
        <text class="iconfont-v2 icon-xingming form-icon"></text>
        <input 
          class="form-input" 
          type="text" 
          placeholder="姓名"
          v-model="formData.recipientName"
        />
      </view>

      <!-- 电话号码 -->
      <view class="form-item">
        <text class="iconfont-v2 icon-dianhua form-icon"></text>
        <input 
          class="form-input" 
          type="number" 
          placeholder="电话号码"
          v-model="formData.phoneNumber"
        />
      </view>
    </view>

    <!-- 确认按钮 -->
    <view class="confirm-section">
      <button 
        class="confirm-btn" 
        :class="{ disabled: !isFormValid }"
        @click="submitAddress"
        :disabled="!isFormValid"
      >
        <text>确定</text>
      </button>
    </view>

    <!-- 地址选择弹窗 -->
    <view v-if="showAddressModal" class="address-modal" @click="closeAddressModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">选择地址</text>
          <text class="close-btn" @click="closeAddressModal">×</text>
        </view>
        <view class="address-list">
          <view 
            class="address-option" 
            v-for="(address, index) in addressOptions" 
            :key="index"
            @click="selectAddressOption(address)"
          >
            <text class="iconfont-v2 icon-dingwei address-option-icon"></text>
            <text class="address-option-text">{{ address }}</text>
            <text class="iconfont-v2 icon-dagou check-icon" v-if="selectedAddress === address"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showAddressModal: false,
      selectedAddress: "南宁市西乡塘区北湖南路32号",
      
      // 表单数据
      formData: {
        buildingName: "",
        doorNumber: "",
        recipientName: "",
        phoneNumber: ""
      },
      
      // 地址选项
      addressOptions: [
        "南宁市西乡塘区北湖南路32号",
        "南宁市青秀区民族大道88号",
        "南宁市兴宁区朝阳路66号",
        "南宁市江南区星光大道99号",
        "南宁市良庆区五象大道123号"
      ]
    }
  },
  computed: {
    // 计算属性：表单是否有效
    isFormValid() {
      return this.selectedAddress && 
             this.formData.buildingName.trim() && 
             this.formData.doorNumber.trim() && 
             this.formData.recipientName.trim() && 
             this.formData.phoneNumber.trim();
    }
  },
  methods: {
    selectAddress() {
      this.showAddressModal = true;
    },
    closeAddressModal() {
      this.showAddressModal = false;
    },
    selectAddressOption(address) {
      this.selectedAddress = address;
      this.closeAddressModal();
    },
    submitAddress() {
      if (!this.isFormValid) {
        uni.showToast({
          title: "请填写完整信息",
          icon: 'none'
        });
        return;
      }

      // 验证手机号格式
      const phoneRegex = /^1[3-9]\d{9}$/;
      if (!phoneRegex.test(this.formData.phoneNumber)) {
        uni.showToast({
          title: "请输入正确的手机号码",
          icon: 'none'
        });
        return;
      }

      // 这里可以添加提交地址的逻辑
      const addressData = {
        address: this.selectedAddress,
        buildingName: this.formData.buildingName,
        doorNumber: this.formData.doorNumber,
        recipientName: this.formData.recipientName,
        phoneNumber: this.formData.phoneNumber,
        fullAddress: `${this.selectedAddress}${this.formData.buildingName}${this.formData.doorNumber}`
      };

      console.log("提交地址信息:", addressData);
      
      // 模拟提交成功
      uni.showToast({
        title: "地址添加成功！",
        icon: 'success'
      });
      
      // 返回上一页
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
.add-address-page {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

/* 地址选择区域 */
.address-selection-section {
  margin-bottom: 40rpx;
  
  .address-item {
    background: white;
    border-radius: 24rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    
    .address-icon {
      font-size: 36rpx;
      color: #ED6567;
      margin-right: 20rpx;
    }
    
    .address-text {
      flex: 1;
      font-size: 32rpx;
      color: #333;
    }
    
    .arrow-icon {
      font-size: 24rpx;
      color: #999;
    }
  }
}

/* 表单区域 */
.form-section {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  
  .form-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .form-icon {
      font-size: 32rpx;
      color: #ED6567;
      margin-right: 20rpx;
      width: 40rpx;
      text-align: center;
    }
    
    .form-input {
      flex: 1;
      font-size: 32rpx;
      color: #333;
      border: none;
      outline: none;
      
      &::placeholder {
        color: #999;
      }
    }
  }
}

/* 确认按钮 */
.confirm-section {
  margin-top: auto;
  
  .confirm-btn {
    width: 100%;
    height: 100rpx;
    background: #ED6567;
    border: none;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover:not(:disabled) {
      background: #d55a54;
      transform: translateY(-2rpx);
    }
    
    &.disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
    }
  }
}

/* 地址选择弹窗 */
.address-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
  
  .modal-content {
    background: white;
    border-radius: 24rpx 24rpx 0 0;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
    
    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 40rpx;
      border-bottom: 2rpx solid #f0f0f0;
      
      .modal-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
      }
      
      .close-btn {
        font-size: 48rpx;
        color: #999;
        cursor: pointer;
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .address-list {
      max-height: 60vh;
      overflow-y: auto;
      
      .address-option {
        display: flex;
        align-items: center;
        padding: 30rpx 40rpx;
        border-bottom: 2rpx solid #f0f0f0;
        cursor: pointer;
        transition: background-color 0.2s ease;
        
        &:hover {
          background: #f8f9fa;
        }
        
        &:last-child {
          border-bottom: none;
        }
        
        .address-option-icon {
          font-size: 32rpx;
          color: #ED6567;
          margin-right: 20rpx;
        }
        
        .address-option-text {
          flex: 1;
          font-size: 32rpx;
          color: #333;
        }
        
        .check-icon {
          font-size: 32rpx;
          color: #ED6567;
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>